<template>
  <div class="promoter-drawer">
    <el-drawer
      v-model="promoterDrawer"
      :append-to-body="true"
      direction="rtl"
      size="550px"
    >
      <template #header>
        <div>
          <span>
            发起人
          </span>
        </div>
      </template>
      <template #default>
        <div class="promoter_content">
          <el-button type="primary" @click="userDialogVisible=true">发起人权限</el-button>
          <div v-if="flowPermission.length===0" style="display: flex;margin-top: 10px;flex-wrap: wrap;">默认所有人</div>
          <div style="display: flex;margin-top: 10px;flex-wrap: wrap;">
            <el-tag
              v-for="(tag,index) in flowPermission"
              :key="index"
              style="margin: 5px;"
              effect="plain"
              type="info"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <user-dialog
      v-model="flowPermission"
      v-model:visible="userDialogVisible"
      :tree-list="treeList"
      :check-strictly="checkDept"
    />
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import func from '../../utils/preload.js'

export default {
  props: {
    /** 成员列表 */
    treeList: {
      type: Array,
      default: () => []
    },
    /** 允许选中部门 */
    checkDept: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const store = useStore()

    /** 选择成员弹窗 */
    const userDialogVisible = ref(false)

    const promoterDrawer = computed({
      get() {
        return store.state.app.workflow.promoterDrawer
      },
      set(flag) {
        store.dispatch('app/workflow/setPromoter', flag)
      }
    })

    const flowPermission = ref([])

    /** 初始化发起人 */
    watch(promoterDrawer, (show) => {
      if (show) {
        flowPermission.value = store.state.app.workflow.flowPermission1.value
      }
    })

    /** 保存 */
    const onSave = () => {
      store.dispatch('app/workflow/setFlowPermission', {
        value: flowPermission,
        flag: true,
        id: store.state.app.workflow.flowPermission1.id
      })
      onCancel()
    }

    /** 取消 */
    const onCancel = () => {
      store.dispatch('app/workflow/setPromoter', false)
    }

    return {
      func,
      userDialogVisible,
      promoterDrawer,
      flowPermission,
      onSave,
      onCancel
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
